<template>
<div style="width: 100%;height: 180px;background-color: white;">


    <div style="width: 100%;height: 40px;background-color: rgb(201, 234, 241);display: flex;justify-content: space-between;">
      
      <div style="width:250px;height: 40px;margin-left: 130px;text-align: center;">
        <span style="line-height: 40px;">嗨，欢迎来订花乐！关注微信</span>
      </div>

    <div style="cursor: pointer; width: 400px; height: 40px;  margin-right: 180px;">
      <ul style="display: flex; list-style: none; padding: 0; margin: 0; height: 100%; align-items: center; justify-content: space-around;">     
        <li @click="router.push('/')" style="padding: 0 10px;">首页</li>
        <li @click="router.push('/login')" style="padding: 0 10px;" v-if="!loginStore.loginToken">登录</li>
        <li style="padding: 0 10px;" @click="handleLogout" v-else>退出</li>
        <li @click="router.push('/cart')" style="padding: 0 10px;">购物车</li>
        <li @click="router.push('/order')" style="padding: 0 10px;">订单查询</li>
        <li @click="router.push('/userInfo')" style="padding: 0 10px;">个人信息</li>
      </ul>
    </div>


     
    </div> 
    





<div style="width: 100%; height: 150px; display: flex; justify-content: space-around; align-items: center; margin-top: px;">

    <!-- Logo部分 -->
    <div style="width: 170px; height: 70px;">
        <img src="/src/assets/images/logo.png" style="width: 170px; height: 70px;"/>
    </div>

    <!-- 搜索框部分 -->
    <div style="display: flex; flex-direction: column; height: 150px; width: 400px; gap: 10px; justify-content: center;">
        <div style="position: relative; width: 100%;">
            <input 
                style="width: 350px; height: 45px; padding: 0 40px 0 15px; border: 1px solid #ccc; border-radius: 4px;" 
                type="text" v-model="searchKey"
                placeholder="输入要搜索的关键字"
            />
            <div style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;">
                <img src="/src/assets/images/sou.png" style="width: 20px; height: 20px;" @click="handleSearch" />  
            </div>
        </div>
        
        <ul style="display: flex; list-style: none; padding: 0; margin: 0; gap: 10px; cursor: pointer; flex-wrap: wrap; justify-content: center;">
            <li style="padding: 0 8px;">玫瑰</li>
            <li style="padding: 0 8px; border-left: 1px solid #ccc;">蛋糕</li>
            <li style="padding: 0 8px; border-left: 1px solid #ccc;">康乃馨</li>
            <li style="padding: 0 8px; border-left: 1px solid #ccc;">百合</li>
        </ul>
    </div>

    <!-- 电话部分 -->
    <div style="display: flex; align-items: center; gap: 8px; width: auto; height: 25px;">
        <img src="/src/assets/images/TEl.png" style="width: 25px; height: 25px;"/>
        <h1 style="font-size: 15px; margin: 0;">400-060-1520</h1>
    </div>

</div>
     
</div>
</template>
 
<script lang="ts" setup>
import axios from '@/http/axios';
import { useRouter } from 'vue-router'; 
const router = useRouter(); // 获取路由实例

import { ref } from 'vue';
const searchKey = ref('');

import { useLoginStore } from '@/stores/LoginStore';
const loginStore = useLoginStore();

// 退出登录
function handleLogout() {
  localStorage.clear()
  loginStore.setTokenAndUsernaeme('','')
  router.push("/")
}


// 搜索
function handleSearch() {
  router.push({
    path: 'sort',
    query: {
      keyword: searchKey.value
    }
  })
  
}

</script>

<style scoped>
  li{
    list-style-type:none; 
  }
  li:hover{
    color:blue;

  }
 
 


 .dao{
  color: black;
  font-size: 13px;
  position: relative;
  right:500px;
  top: 50px;
  
  
 }
 .dao>li{
  border-right: 1px solid black;
  margin:5px;
 }


 

</style>